import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Button } from 'antd-mobile';
import store from './redux/store';
import { Header } from './conpoments';
import { Book, Home, Message, My, Order} from './views';
// import PropTypes from 'prop-types';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      jisuan: null
    }
  }

  getMenusData = () => {
    return  [{
      text: '首页',
      icon: 'icon-home',
      url: '/',
      exact: true,
      component: Home
    },{
      text: '我的',
      icon: 'icon-wode1',
      url: '/my',
      component: My
    },{
      text: '预约订单',
      icon: 'icon-yuyuedingdan',
      url: '/book',
      component: Book
    },{
      text: '订单',
      icon: 'icon-dingdan-80',
      url: '/order',
      component: Order
    },{
      text: '消息',
      icon: 'icon-xiaoxi',
      url: '/message',
      component: Message
    }]
  }

  increment = () => {
    store.dispatch({type: 'INCREMENT'}); 
    this.setState({jisuan : store.getState()});
  }
  render() {
    const RouteWithSubRoutes = (route) => {
      return ( 
        <Route path={route.url} exact={route.exact} render={props => (
          // pass the sub-routes down to keep nesting
          <route.component {...props} routes={route.routes}/>
        )}/>)
    }
    return (
      <div className="App">
        <Router>
          <div>
            <Header menus={this.getMenusData()}/>
            {/* <Route path="/" exact component={() => <Home/>}></Route> */}
            {this.getMenusData().map((route, index) => {
              return (<RouteWithSubRoutes key={index} {...route}/>)
            })}
          </div>
        </Router>
      </div>
    );
  }
}

export default App;
